<template>
  <div class="menu-list" :class="{ open: !isCollapse }">
     <div class="logo" @click="toggleMenu()">
      <div>logo</div>
      <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
    </div>
    <el-menu :collapseTransition="false" :default-active="$route.path" :router="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <el-menu-item index="/">
        <i class="el-icon-menu"></i>
        <span slot="title">工作台</span>
      </el-menu-item>
      <el-menu-item index="/sjzs">
        <i class="el-icon-setting"></i>
        <span slot="title">数据展示</span>
      </el-menu-item>
      <el-submenu index="/zyxt">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">专业系统</span>
        </template>
       <el-menu-item index="/zyxt/jgbljf">机构不良记分</el-menu-item>
       <el-menu-item index="/zyxt/rybljf">人员不良记分</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
  export default {
    name: 'base-menu',
    data() {
      return {
        isCollapse: false
      };
    },
    methods: {
      toggleMenu() {
        this.isCollapse = !this.isCollapse;
      },
      handleOpen(key, keyPath) {
        window.console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        window.console.log(key, keyPath);
      }
    }
  }
</script>
<style lang="scss">
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    height: calc(100% - 62px);
    overflow-y: auto;
    overflow-x: hidden;
    
  }
</style>
<style lang="scss" scoped>
  .menu-list{
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      .el-menu-item{
        border-left: 4px solid transparent;
        &.is-active{
          background: #fafafa;
          box-shadow: inset 5px 5px 5px #ddd;
          border-left: 4px solid #12347b;
        }
      }
    }
  }
  .el-menu{
      border-right: none !important;
  }
  
  .menu-list{
    background: #fff;
    height: 100%;
    width: 64px !important;
    .logo{
      height: 62px;
      padding: 10px;
      display: flex;
      align-items: center;
      color: #999;
      border-bottom: 1px solid #eee;
      justify-content: center;
      i{
        cursor: pointer;
      }
      > div {
        flex: 1;
        display: none;
      }
    }
    &.open{
      width: 180px !important;
      .logo{
        > div {
          display: block;
        }
      }
    }
  }
</style>